<template>
  <el-dialog :visible.sync="modal" title="试卷详情" width="70%" custom-class="custom-dialog-test-edit-style">
    <el-form
      :inline="true"
      :model="ruleForm"
      style="width: 100%; margin-bottom: 60px"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="试卷名称" prop="exam_name" style="width: 100%">
        <el-input
          v-model="ruleForm.exam_name"
          maxlength="50"
          show-word-limit
          placeholder="请输入"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="培训类型" prop="type_ids" style="width: 100%">
        <el-cascader
          :show-all-levels="false"
          :options="options2"
          style="width: 400px"
          v-model="ruleForm.selected_type_ids"
          :props="{ multiple: true, checkStrictly: true }"
          @change="handleChange"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="合格分数" prop="min_point" style="width: 100%">
        <el-input v-model="ruleForm.min_point" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="不合格补考次数" prop="more_num" style="width: 100%">
        <el-radio-group v-model="ruleForm.more_num">
          <el-radio :label="1">不限</el-radio>
          <el-radio :label="2">限制</el-radio>
        </el-radio-group>
        <span style="font-size: 12px" v-show="ruleForm.more_num != 1">
          考试连续
          <el-input
            v-model="ruleForm.more_num_count"
            show-word-limit
            placeholder="请输入"
            style="width: 80px"
          ></el-input>
          次不合格重新培训
        </span>
      </el-form-item>
      <el-form-item label="单选题数量" prop="dan_num">
        <el-input v-model="ruleForm.dan_num" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="单选题分数" prop="dan_point">
        <el-input v-model="ruleForm.dan_point" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="多选题数量" prop="duo_num">
        <el-input v-model="ruleForm.duo_num" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="多选题分数" prop="duo_point">
        <el-input v-model="ruleForm.duo_point" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="判断题数量" prop="pan_num">
        <el-input v-model="ruleForm.pan_num" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="判断题分数" prop="pan_point">
        <el-input v-model="ruleForm.pan_point" show-word-limit placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button @click="back">关闭</el-button>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/libs/request';

export default {
  name: 'addTest',
  data() {
    return {
      modal: false,
      ruleForm: {
        id: '',
        exam_name: '',
        type_ids: [],
        selected_type_ids: [],
        min_point: 0,
        more_num: 1,
        more_num_count: 1,
        dan_num: '',
        dan_point: '',
        duo_num: '',
        duo_point: '',
        pan_num: '',
        pan_point: '',
      },
      rules: {
        exam_name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        type_ids: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        min_point: [{ required: true, message: '请填写合格分数', trigger: 'blur' }],
        more_num: [{ required: true, message: '请选择不合格补考次数', trigger: 'blur' }],
        dan_num: [{ required: true, message: '请填写单选题数量', trigger: 'blur' }],
        dan_point: [{ required: true, message: '请填写单选题分数', trigger: 'blur' }],
        duo_num: [{ required: true, message: '请填写多选题数量', trigger: 'blur' }],
        duo_point: [{ required: true, message: '请填写多选题分数', trigger: 'blur' }],
      },
      options2: [],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    rest() {
      this.ruleForm = {
        id: '',
        exam_name: '',
        type_ids: [],
        selected_type_ids: [],
        min_point: 0,
        more_num: 1,
        more_num_count: 1,
        dan_num: '',
        dan_point: '',
        duo_num: '',
        duo_point: '',
        pan_num: '',
        pan_point: '',
      }
    },
    showModal(id = '') {
      this.rest();
      this.modal = true;
      this.ruleForm.id = id;
      this.getInfo();
    },
    getInfo() {
      request({
        url: '/test/info',
        data: this.ruleForm,
        method: 'post',
      }).then((res) => {
        this.options2 = res.data.train_types;
        if (res.data.data) {
          this.ruleForm = res.data.data;
        }
        this.$refs['ruleForm'].clearValidate()
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loading = this.$loading();
          request({
            url: '/test/save',
            method: 'post',
            data: this.ruleForm,
          })
            .then((res) => {
              loading.close();
              this.modal = false;
              this.$parent.getList();
            })
            .catch((err) => {
              this.$message.error(err.msg);
              loading.close();
            });
        } else {
          // this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleChange(value) {
      if (value) {
        this.ruleForm.type_ids = value.map((item) => {
          return item[item.length - 1];
        });
      }
    },
    back() {
      this.modal = false;
    },
  },
};
</script>

<style scoped>
.el-form-item__label {
  width: 180px !important;
}

.flex {
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 106px;
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.demo-ruleForm /deep/ .el-input-number__decrease,
.demo-ruleForm /deep/ .el-input-number__increase {
  display: block !important;
}

.footer {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}
</style>
<style>
.custom-dialog-test-edit-style .el-dialog__body {
  height: 70vh;
}
</style>